<template>
  <div>
    <el-dialog
          title="电价方案维护"
          :visible.sync="dialogVisible"
          width="75%">
          <div>
            <el-form ref="form" :model="form" label-width="130px" :rules="rules">
              <el-row >
                <el-col :span="12">
                  <el-form-item label="光伏电站" prop="companyId">
                    <el-select size="small" v-model="companyId" style="width: 100%;" @change="dialogchange">
                      <el-option v-for="(item,index) in xitonglist"  :key="index" :label="item.name" :value="item.id" ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="年份" prop="year">
                    <el-date-picker
                      @change="changetime"
                      style="width: 100%;"
                      size="small"
                      value-format="yyyy"
                      v-model="form.year"
                      type="year"
                      placeholder="选择年">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                  <span class="text">业务单位信息</span>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="公司名称" prop="companyName">
                      <el-input v-model="form.companyName" placeholder="请输入公司名称" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="纳税人识别号" prop="enterpriseCode">
                      <el-input v-model="form.enterpriseCode" placeholder="请输入纳税人识别号" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="财务联系人">
                      <el-input v-model="form.contacts" placeholder="请输入财务联系人" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="联系人电话">
                      <el-input v-model="form.contactsMobile" placeholder="请输入联系人电话" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="联系地址">
                      <el-input v-model="form.address" placeholder="请输入联系地址" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="开户银行">
                      <el-input v-model="form.customerNo" placeholder="请输入开户银行" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="付款账号">
                      <el-input v-model="form.paymentAccountNo" placeholder="请输入付款账号" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row >
                  <span class="text">支出【租金】</span>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="是否支付租金" prop="payFlag">
                      <el-radio-group v-model="form.payFlag">
                        <el-radio label="1">是</el-radio>
                        <el-radio label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="需支付租金金额">
                      <el-input v-model="form.rentAmount" placeholder="请输需支付租金金额" size="small"><span slot="suffix">元/年</span> </el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row >
                  <span class="text">收入【电费】</span>
              </el-row>
              <el-row >
                <el-col :span="12">
                  <el-form-item label="计费标准">
                    <el-select size="small" v-model="form.chargeStandard" style="width: 100%;">
                      <el-option label="固定电价+固定折扣" :value="1" ></el-option>
                      <el-option label="固定电价+按时间浮动" :value="2" ></el-option>
                      <el-option label="分时电价+固定折扣" :value="3" ></el-option>
                      <el-option label="分时电价+按时间浮动" :value="3" ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="8">
                    <el-form-item label="电费类型">
                      <el-radio-group v-model="form.degreeType">
                        <el-radio label="01">固定电价</el-radio>
                        <el-radio label="03">分时电价</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="16">
                    <el-form-item label="电费方案">
                      <el-select size="small" v-model="form.sellElecTemplateId" style="width: 65%;" @change="changedianfei">
                        <el-option v-for="(item,index) in fanganlist"  :key="index" :label="item.elePriceTemplateName" :value="item.id" ></el-option>
                      </el-select>
                      <el-button :disabled="!form.sellElecTemplateId" @click="xiangqing" type="primary" size="small" class="button">查看详情</el-button> <el-button @click="tianjia" type="primary" size="small">添加</el-button>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5" v-for="(item,index) in monandtimelist" :key="index">
                <el-col :span="8">
                    <el-form-item label="浮动折扣">
                      <el-input v-model="item.discount" placeholder="请输浮动折扣" size="small"><span slot="suffix">%</span> </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="日期">
                    <el-date-picker
                      size="small"
                      @input="$forceUpdate()"
                      style="width: 65%;"
                      v-model="item.time"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button type="danger" size="small" class="button" @click="dellist(index)">删除</el-button>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                  <span class="text">参考电费</span>
              </el-row>
              <el-row >
                <el-col :span="12">
                  <el-form-item label="国网市电价格方案">
                    <el-select size="small" v-model="form.cityElecTemplateId" style="width: 100%;">
                      <el-option v-for="(item,index) in fanganlist"  :key="index" :label="item.elePriceTemplateName" :value="item.id" ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="上网电价">
                    <el-select size="small" v-model="form.netElecTemplateId" style="width: 100%;">
                      <el-option v-for="(item,index) in fanganlist"  :key="index" :label="item.elePriceTemplateName" :value="item.id" ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                  <span class="text">收款信息</span>
              </el-row>
              <el-row :gutter="5">
                  <el-col :span="12">
                    <el-form-item label="收款单位账户名称">
                      <el-input v-model="form.accountName" placeholder="请输入收款单位账户名称" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="收款单位账号">
                      <el-input v-model="form.account" placeholder="请输入收款单位账号" size="small"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="5">
                <el-col :span="12">
                    <el-form-item label="收款单位开户行">
                      <el-input v-model="form.bank" placeholder="请输入收款单位开户行" size="small"></el-input>
                    </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="quxiao" size="small">取 消</el-button>
            <el-button type="primary" @click="submit" size="small">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog
          title=""
          :visible.sync="dialogVisibles"
          width="70%">
          <div>
            <iframe v-if="isshow" height="500" width="100%" name="iframeName" id="iframeId" :src="`https://www.hi3060.com/static/pio/power-item/index.html#/ElectricityPrice?num=${num}&timestamp=${Date.now()}`"></iframe>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibles = false" size="small">取 消</el-button>
          </span>
        </el-dialog>
  </div>
</template>

<script>
import {getdianjiaxialalistapi,postadddianjiaapi,putupdatedianjiaapi} from '@/api/Photovoltaic/settlement/LightElectricity'
export default {
  name: 'CallPoliceAddDialog',
  props: {
    xitonglist: {
      type:Array
    },
    // companyId: {},
    // subBuro: {}
  },
  data() {
    return {
      dialogVisible: false,
      form: { payFlag: '1', degreeType: '01'},
      fanganlist: [],
      monandtimelist: [
        {discount:'',time:[]}
      ],
      rules: {
        // companyId: [{ required: true, message: '请选择光伏电站', trigger: 'blur' }],
        year: [{ required: true, message: '请选择年份', trigger: 'blur' }],
        companyName: [{ required: true, message: '请输入公司名称', trigger: 'blur' }],
        enterpriseCode: [{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }],
        payFlag: [{ required: true, message: '请选择是否支付租金', trigger: 'change' }],
      },
      companyId:'',
      subBuro:'',
      dialogVisibles:false,
      num:'',
      isshow:false
    };
  },

  mounted() {
    // this.$set(this.form,'classId',this.companyId)
  },

  methods: {
    // 弹窗确认
    async submit() {
      await this.$refs.form.validate()
      const floatDiscountList =this.monandtimelist.map((item,index) => {
        return {
          classId: this.companyId,
          discount: item.discount,
          startTime: item.time[0],
          endTime: item.time[1],
          year:this.form.year
         }
      })
      this.form.id?await putupdatedianjiaapi({
          ...this.form,floatDiscountList,classId:this.companyId
      }).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'修改成功':res.message
        })
      }):
        await postadddianjiaapi({
          ...this.form,floatDiscountList,classId:this.companyId
      }).then(res => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'新增成功':res.message
        })
      })
      this.quxiao()
      this.$emit('shuaxin')
    },
    // 编辑
    async bianji(val) {
      this.dialogVisible = true
      await this.dialogchange(val.classId)
      await this.getfanganxiala()
      this.form = { ...val }
      this.$set(this.form,'payFlag',val.payFlag.toString())
      this.monandtimelist = val.floatDiscountList
      this.monandtimelist.forEach(ele => {
        ele['time']=[]
        ele['time'][0]=ele.startTime
        ele['time'][1]=ele.endTime
      })
       this.changedianfei(this.form.sellElecTemplateId)
    },
    // 时间切换
    changetime(val){
      this.getfanganxiala()
    },
    // 添加
    tianjia() {
      this.monandtimelist.push({discount:'',time:[]})
    },
    // 删除
    dellist(val) {
      if(this.monandtimelist.length=='1') return this.$message.warning('最后一项不可删除')
      this.monandtimelist = this.monandtimelist.filter((ele, index) => {
        if (val !== index) {
          return ele
        }
      })
    },
    // 光伏电站弹窗下拉
    dialogchange(val) {
      if (!val) return
      this.companyId = val
      const obj= this.xitonglist.find(ele=>ele.id==val)
      this.$set(this, 'subBuro', obj.subBuro)
      const date = new Date()
      const year = date.getFullYear() // 年
      this.$set(this.form,'year',year.toString())
       this.getfanganxiala()
    },
    // 获取价格方案下拉
    async getfanganxiala() {
      const { data: { list } } = await getdianjiaxialalistapi({elePriceTemplateType:'01',orgNo:this.subBuro,year:this.form.year})
      this.fanganlist = list
    },
    // 弹窗取消
    quxiao() {
      this.dialogVisible = false
      this.form = {}
      this.monandtimelist=[
        {discount:'',time:[]}
      ]
      this.$refs.form.resetFields()
    },
    // 查看电价详情
    xiangqing() {
      this.num = Math.random()
        this.isshow=true
        this.dialogVisibles=true
    },
    changedianfei(val) {
      const editstate = this.fanganlist.find(ele => ele.id == val)
      localStorage.setItem('editState', JSON.stringify(editstate))
    }
  },
  watch:{
    dialogVisibles(val) {
      if(!val){
        this.isshow=false
      }
    }
  }
};
</script>

<style scoped>
.text{
  color: #000;
  font-size: 16px;
}
.button{
  margin-left: 10px;
}
::v-deep .el-form-item{
  margin-bottom: 9px;
}
::v-deep .el-form-item__error{
  padding-top: 0;
}
</style>